<template>
	<view>
		<view class="header">
			<view class="headerView">
				收货地址请认真填写与核对，我们将按照您所填写的地址快递产品，如因地址填写错误导致您无法收到产品，责任由您承担。
			</view>
		</view>
		<!-- 空白页面 -->

		<view class="" v-if="addressList.length > 0">
			<view class="list d-flex mt-2" v-for="(item, index) in addressList" :key="index"
				@click="checkAddress(item)" @tap="newaddress('edit',item)">
				<view class="wrapper flex-column">
					<view class="address-box d-flex">
						<view class="tag" v-if="item.status == 1">默认</view>
						<view class="address">{{item.area}}{{item.address}}</view>
					</view>
					<view class="u-box d-flex">
						<view class="name">{{item.realname}}</view>
						<view class="mobile">{{item.mobile}}</view>
					</view>
				</view>
				<view>
					<image class="image" src="@/static/img/cate/revise.png" mode="widthFix" >
				</view>
			</view>
		</view>
		<view class="white" v-else>
			<image src="@/static/img/cate/weizhi.png" mode="widthFix" style="width: 304rpx;height: 247rpx;" />
			<view class="">暂无收货地址</view>
		</view>
		<!-- 列表页 -->
		<!-- 底部固定 -->
		<view class="d-flex bottom" @tap="newaddress('add')">
			<image src="@/static/img/cate/jia.png" mode="widthFix" style="width: 30rpx;" />
			<text class="add-btn">添加地址</text>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '收货地址',
				addressList: []
			}
		},
		onLoad() {
			//判断是否登录
			let result = this.$api.isLogin();
			if (result === false) {
				return false;
			}

			this.loadData();
			uni.$on('changeAddress', () => {
				this.loadData();
			})
		},
		methods: {
			async loadData() {
				let dataObj = {
					token: uni.getStorageSync('token')
				}
				let res = await this.$myRequest({
					url: '/getAllAddress',
					data: dataObj,
					methods: 'post'
				})

				this.addressList = res.data.data;
			},
			//选择地址
			checkAddress(item) {
				if (this.source == 1) {
					//this.$api.prePage()获取上一页实例，在App.vue定义
					this.$api.prePage().addressData = item;
					uni.navigateBack({
						delta:1
					})
				}
			},

			newaddress(type, item = {}) {
				uni.navigateTo({
					url: `/pages/user/newaddress?type=${type}&data=${JSON.stringify(item)}`
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5;
	}

	.header {
		position: relative;

		.headerView {
			display: block;
			padding: 16rpx 30rpx 10rpx;
			line-height: 1.6;
			color: #999;
			background-color: #f8f8f8;
			font-size: 24rpx;
		}
	}

	.white {
		margin: 200rpx 0rpx;
		text-align: center;
		letter-spacing: 2rpx;
	}

	.bottom {
		position: fixed;
		color: #e80909;
		letter-spacing: 2rpx;
		width: 100%;
		height: 50rpx;
		bottom: 0;
		align-items: center;
		justify-content: center;
		padding: 20rpx 0;
		background-color: white;
		box-shadow: 1px 2px 5px rgba(210, 63, 96, 0.4);

		image {
			margin-right: 20rpx;
		}
	}

	.list {
		display: flex;
		align-items: center;
		padding: 20upx 30upx;
		background: #fff;
		position: relative;
	}

	.wrapper {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.address-box {
		display: flex;
		align-items: center;

		.tag {
			font-size: 24upx;
			color: white;
			margin-right: 10upx;
			background: #e80909;
			border-radius: 4upx;
			padding: 10rpx;
			line-height: 1;
		}

		.address {
			font-size: 30rpx;
			color: #303133;
		}
	}

	.u-box {
		font-size: 28rpx;
		color: #909399;
		margin-top: 16rpx;

		.name {
			margin-right: 30rpx;
		}

		.mobile {
			flex: 1;
		}
	}

	.image {
		width: 36rpx;

	}
</style>
